thymeleaf springboot 如何加载本地图片 springboot图片存入数据库mybatis

2024-07-13 18:29| 来源: 网络整理| 查看: 265

简单实现了下图片上传与个人图片显示的流程，给一个不知道怎么实现的兄弟看下。

项目介绍

该项目实现文件上传功能，在前端上传图片和用户名，将图片保存在本地，同时将路径存储至数据库。之后可利用用户名进行对应存储图片路径获取和显示。

实体类和mapper

利用mybatis实现实体存储和获取 Img实体类

public class Img implements Serializable{ private static final long serialVersionUID = 8990798455744465533L; private int id; private String path; private String owner; //getter&setter }

主要成员是自增id，所在路径和所有者。

ImgMapper

@Mapper public interface ImgMapper { @Select("select id, path, owner from img where owner = #{ownerName}") public List getImgByOwner(String ownerName); @Insert("insert into img(path, owner) values(#{path}, #{owner})") @Options(useGeneratedKeys = true, keyProperty = "id") public int insertImg(Img img); }

简单的查和存，id用的自增，插入时利用@Options注解进行指定，表结构比较简单就不放了。

图像上传

本项目使用普通的html文件，主要组件就是file类型的input，利用ajax进行图像的传输。 Html

img upload owner:

owner用来模拟用户名，真实用的时候从会话中获取即可。 Load_img用来显示当前选择图像

//防止文件为空或体积过大 function checkImg(){ var fileName=$("#filename").val() fileName=fileName.replace("","") var flag=true if(fileName==""){ flag=false alert("请选择图片") } else{ var size = $("#filename")[0].files[0].size if(size/1000>100){ flag=false alert("图片大小不能超过100KB") } } if(flag){ showLoadImg() } else{ $("#filename").val("") } return flag } //图片预览 function showLoadImg(){ var file=$('#filename').get(0).files[0] var reader = new FileReader() //将文件以Data URL形式读入页面 reader.readAsDataURL(file) console.log(file.toString()) reader.onload = function(e){ //显示文件 $("#load_img").html('

上传图片预览

' + '

'); } } //图片上传 function imgUpload(){ //formdata形式数据阐述 var formdata=new FormData(); formdata.append('fileName', $('#filename').get(0).files[0]); formdata.append('owner', $('#ownername').val()) console.log($('#ownername').val()) //ajax上传 $.ajax({ async: false, type: 'POST', url: "/uploadImg", dataType: 'json', data: formdata, contentType:false,//ajax上传图片需要添加 processData:false,//ajax上传图片需要添加 success: function (data) { console.log(data) var result = data.result $("#message").html(result) }, error: function (e) { alert("error,请输入正确参数"); } }) }

js文件实现的方法主要有三个，check进行文件类型和大小的判断，show实现图片的预览，因为简单实现也没有进行缩略的操作，有兴趣可以加一下。ImgUpload中调用ajax进行处理，将img和owner字符打包成FormData形式传输，要注意的是，为了不让JQuery进行二次处理，将processData和contentType设置为false，因为FormData默认的contentType就是multipart/form-data，所以设置为false也能正常传输。

后端upload controller方法

@RequestMapping("/uploadImg") @ResponseBody //文件上传 public String uploadImg(@RequestParam("fileName") MultipartFile file, @RequestParam("owner")String owner, HttpServletRequest request) throws IOException { String result;//上传结果信息 Map map=new HashMap(); if (file.getSize() / 1000 > 100){ result="图片大小不能超过100KB"; } else{ //判断上传文件格式 String fileType = file.getContentType(); if (fileType.equals("image/jpeg") || fileType.equals("image/png") || fileType.equals("image/jpeg")) { //获取文件名 String fileName = file.getOriginalFilename(); //获取文件后缀名 int index = fileName.lastIndexOf("."); String suffixName; if(index > 0) { suffixName = fileName.substring(fileName.lastIndexOf(".")); }else{ suffixName = ".png"; } //重新生成文件名 fileName = UUID.randomUUID()+suffixName; // 获取服务器路径(springboot虚拟服务器文件不适用) // String realPath = request.getServletContext().getRealPath("img");//文件的上传路径 //获取项目路径 Resource resource = new ClassPathResource(""); String projectPath = resource.getFile().getAbsolutePath()+ "\\static\\img"; System.out.println(projectPath); if (upload(projectPath, file, fileName)) { //文件存放的相对路径(一般存放在数据库用于img标签的src) String relativePath="img/"+fileName; int row = saveImg(owner, relativePath); if(row > 0) result = "图片上传成功"; else result = "图片上传数据库失败"; } else{ result="图片上传失败"; } } else{ result="图片格式不正确"; } } //结果用json形式返回 map.put("result",result); String resultJson; try { resultJson = mapper.writeValueAsString(map); } catch (JsonProcessingException e) { e.printStackTrace(); return e.toString(); } System.out.println(resultJson); return resultJson; }

该方法获取MultipartFile类型的文件，获取其文件名和后缀名信息。为了防止文件名冲突或者字符乱码问题，利用UUID生成新的随机文件名，并传入upload方法进行文件存储。失败或成功的结果利用map转json后传回前端。要注意别忘了@ResponseBody注解，小心404。路径是获取的本地项目所在位置。大家都知道SpringBoot使用的是自带的tomcat服务器，每次启动会生成一个虚拟的tomcat文件，所以利用request.getServletContext().getRealPath()获取的路径是临时的tomcat文件，根据设置一段时间后会被清除，不适合文件存储，所以利用ClassPathResource获取对应的本地文件夹来进行存放。

upload方法，进行文件路径和本地存储处理

private boolean upload(String realPath, MultipartFile file, String fileName){ // 将img文件存入本地 String path = realPath + "\\" + fileName; System.out.println(path); File dest = new File(path); //判断文件父目录是否存在 if (!dest.getParentFile().exists()) { boolean b = dest.getParentFile().mkdir(); if(!b){ return b; } } //保存文件 try { file.transferTo(dest); return true; } catch (IllegalStateException | IOException e) { e.printStackTrace(); return false; } }

Upload判断img文件夹是否存在，之后利用MultipartFile自带的方法进行存储。

数据库存储saveImg

private int saveImg(String owner, String path){ //将图片信息存入数据库 Img img = new Img(); img.setOwner(owner); img.setPath(path); int row = imgMapper.insertImg(img); return row; }

没什么好说的，返回变动行数让主方法去处理。

按用户名获取存储图片

主要流程就是ajax获取数据库存储的图片路径json，显示出来就好。前端html

//根据所有者显示图像 function showImg(){ //获取owner var ownerName = $('#ownername').val() //formdata形式数据阐述 var formdata=new FormData(); formdata.append('owner', $('#ownername').val()) console.log($('#ownername').val()) //ajax获取图像url $.ajax({ async: false, type: 'POST', url: "/getImgPath", dataType: 'json', data: formdata, contentType:false,//ajax上传图片需要添加 processData:false,//ajax上传图片需要添加 success: function (data) { console.log(data) var result = data.paths var str_img = "" if(result.length == 0){ $("#message").html("该用户无图") } else { result.forEach(function (item, index, array) { str_img += '

' + "" }) console.log(str_img) $("#owner_img").html(str_img) } }, error: function (e) { alert("error"); } }) }

这边要注意的是，springboot默认的资源文件是在resources的static下，所以这边存放在该文件夹下的图片能直接用/img/xxx输出。如果放在其它位置需要直接使用这种形式的url输出，可以设置config类来进行设置。

虚拟路径的设置可以参考

后端获取信息并json输出

@RequestMapping("/getImgPath") @ResponseBody //获取对应选手的图片路径，传递给前端 public String getImgPathByOwner(@RequestParam("owner")String owner){ List imgs= imgMapper.getImgByOwner(owner); HashMap map = new HashMap(); ArrayList paths = new ArrayList(); if(imgs!=null && !imgs.isEmpty()){ for(Img i:imgs){ paths.add(i.getPath()); } } map.put("paths", paths); String result; try { result = mapper.writeValueAsString(map); } catch (JsonProcessingException e) { e.printStackTrace(); return e.toString(); } return result; }实现效果

thymeleaf springboot 如何加载本地图片 springboot图片存入数据库mybatis_ajax

thymeleaf springboot 如何加载本地图片 springboot图片存入数据库mybatis_图片上传_02

thymeleaf springboot 如何加载本地图片 springboot图片存入数据库mybatis_ajax_03

thymeleaf springboot 如何加载本地图片 springboot图片存入数据库mybatis_json_04

【本文地址】

公司简介

联系我们